@ehl_white: white;
@ehl_black: black;
@ehl_red: red;
@ehl_blue: #256fff;
@ehl_light_blue: #5991ff;
@ehl_font_grey: #3b424c;
@ehl_back_grey: #f2f4f8;
@ehl_table_grey: #f1f2f8;
@ehl_devide_grey: #dfe6ed;
@ehl_border_grey: #c4d0dd;
@ehl_disable: rgba(220, 222, 229, 1);
@ehl_placeholder_color: #c7cbd5;
@ehl_table_back: #ffffff;
@ehl_table_shadow: rgba(218, 218, 218, 0.5);
@ehl_quadrangle: #2f9eb4;
@ehl_quadrangle_border: #1d757d;
@ehl_quadrangle_back: rgba(12, 122, 185, 0.15);
@ehl_font_size_default: 14px;
@ehl_font_size_middle: 17px;
@ehl_font_size_title: 20px;

.icon {
  margin: 0 5px;
  font-size: @ehl_font_size_title !important;
  color: @ehl_blue;
  cursor: pointer;
}

.ehl_operation {
  font-size: @ehl_font_size_title;
  color: @ehl_blue;
}

.ehl_font_title {
  font-size: @ehl_font_size_title;
  color: @ehl_font_grey;
}

.ehl_margin_10 {
  margin-right: 10px;
}

.ehl_margin_5 {
  margin-right: 5px;
}

.ehl_round_card {
  align-items: center;
  padding: 15px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px 0 rgba(218, 218, 218, 0.5);
}

.ehl_round_card_up {
  .ehl_round_card();

  position: relative;
  border-radius: 6px 6px 0 0;
  box-shadow: none;

  &::after {
    position: absolute;
    right: 15px;
    bottom: 0;
    left: 15px;
    height: 1px;
    content: '';
    background-color: #dfe6ed;
  }
}

.ehl_round_card_down {
  .ehl_round_card();

  border-radius: 0 0 6px 6px;
}

.ehl_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: @ehl_font_size_default;
  text-align: center;
  cursor: pointer;
  border: 1px solid;
  border-radius: 3px;

  &:hover {
    color: @ehl_white;
    background-color: @ehl_light_blue;
    border-color: @ehl_light_blue;
  }
}

.ehl_btn_size {
  flex-shrink: 0;
  height: 35px;
  padding: 0 10px;
}

.ehl_btn_size_big {
  flex-shrink: 0;
  width: 100px;
  height: 35px;
}

.ehl_btn_size_middle {
  flex-shrink: 0;
  width: 80px;
  height: 35px;
}

.ehl_btn_size_small {
  flex-shrink: 0;
  width: 70px;
  height: 30px;
}

.ehl_btn_size_pagination {
  flex-shrink: 0;
  padding: 3px 8px;
}

.ehl_btn_blue {
  .ehl_btn();

  color: @ehl_white;
  background-color: @ehl_blue;
  border-color: @ehl_blue;
}

.ehl_btn_blue_white {
  .ehl_btn();

  color: @ehl_blue;
  background-color: @ehl_white;
  border-color: @ehl_blue;
}

.ehl_btn_white {
  .ehl_btn();

  color: @ehl_font_grey;
  background-color: @ehl_white;
  border-color: @ehl_border_grey;
}

.ehl_btn_disable {
  .ehl_btn();

  color: @ehl_white;
  cursor: not-allowed;
  background-color: @ehl_disable;
  border-color: @ehl_disable;

  &:hover {
    color: @ehl_white;
    background-color: @ehl_disable;
    border-color: @ehl_disable;
  }
}

.ehl_input_size_search {
  width: 400px;
  height: 36px;
}

.ehl_input_size {
  flex-grow: 1;
  width: 1px;
  height: 36px;
}

.ehl_input_height {
  height: 36px;
}
//普通input
.ehl_input_common {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  resize: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;

  &:focus {
    border-color: @ehl_blue;
  }
}
//elementui input
.ehl_input_el {
  display: flex;
  align-items: center;

  .el-input__inner {
    height: 100%;
    font-size: @ehl_font_size_default;
    line-height: 100%;
    color: @ehl_black;
  }

  .el-input__suffix {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
//input placeholder
.ehl_input_placeholder {
  .placeholder {
    display: flex;
    align-items: center;
    font-size: @ehl_font_size_default;
    color: @ehl_placeholder_color;
  }

  &::-webkit-input-placeholder {
    .placeholder();
  }

  &::-moz-placeholder {
    .placeholder(); //Mozilla Firefox 19+
  }

  &:-moz-placeholder {
    .placeholder(); //Mozilla Firefox 4 to 18
  }

  &:-ms-input-placeholder {
    .placeholder(); //Internet Explorer 10-11
  }
}

.ehl_input_placeholder_error {
  .placeholder {
    display: flex;
    align-items: center;
    font-size: @ehl_font_size_default;
    color: @ehl_red;
  }

  &::-webkit-input-placeholder {
    .placeholder();
  }

  &::-moz-placeholder {
    .placeholder(); //Mozilla Firefox 19+
  }

  &:-moz-placeholder {
    .placeholder(); //Mozilla Firefox 4 to 18
  }

  &:-ms-input-placeholder {
    .placeholder(); //Internet Explorer 10-11
  }
}

.ehl_input_placeholder_el {
  input {
    .ehl_input_placeholder();
  }
}

.ehl_input_placeholder_el_error {
  input {
    .ehl_input_placeholder_error();
  }
}

//下拉多级选择框
.ehl_cascader_size {
  flex: 1;
  height: 34px;
}

.ehl_cascader {
  .el-input,
  .el-input__inner {
    height: 100%;
    font-size: @ehl_font_size_default;
    line-height: 100%;
  }
}

.ehl_cascader_pop {
  box-sizing: border-box;
}

.ehl_select_size {
  flex-shrink: 0;
  width: 150px;
  height: 36px;
}

.ehl_select_size_middle {
  flex-shrink: 0;
  width: 250px;
  height: 36px;
}

.ehl_select_size_big {
  flex-shrink: 0;
  width: 100%;
  height: 36px;
}

.ehl_select_size_grow {
  flex: 1;
  height: 36px;
}

.ehl_select {
  .select-trigger {
    height: 100%;
  }

  .el-input {
    height: 100%;

    .el-input__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: @ehl_font_size_default;
      line-height: 100%;
      color: @ehl_font_grey;
      border-radius: 5px;
    }

    .el-input__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      line-height: 100%;
    }
  }

  .el-input__validateIcon {
    display: none !important;
  }
}

.ehl_select_pop {
  .el-select-dropdown__item {
    text-align: left;
  }

  span {
    font-size: @ehl_font_size_default;
  }
}

.ehl_select_tree_pop {
  .el-scrollbar {
    max-height: 150px;
    overflow: auto;
  }

  .el-scrollbar__wrap {
    margin: 0 !important;
    overflow: hidden;
  }

  .el-select-dropdown__list {
    height: 100%;
    padding: 10px;
    overflow: hidden;
  }

  .el-select-dropdown__item {
    height: 100%;
    padding: 0;
    overflow: auto;
  }

  .el-tree {
    overflow: hidden;

    .el-tree-node__content {
      font-weight: initial !important;
    }
  }
}

//popwindow
.ehl_drop_pop_size {
  width: auto !important;
  min-width: auto;
  padding: 10px 15px;
}

.ehl_drop_pop {
  font-size: @ehl_font_size_default;
  color: @ehl_black;
  cursor: pointer;

  &:hover {
    background-color: @ehl_back_grey;
  }
}

.ehl_tab {
  padding: 10px 20px;
  font-size: @ehl_font_size_default;
  color: @ehl_font_grey;
  cursor: pointer;
  border-top: 1px solid @ehl_border_grey;
  border-bottom: 1px solid @ehl_border_grey;
}

.ehl_tab_box {
  display: flex;
  flex-shrink: 0;
  align-items: center;

  .ehl_tab:first-child {
    border-left: 1px solid @ehl_border_grey;
  }

  .ehl_tab:last-child {
    border-right: 1px solid @ehl_border_grey;
  }
}

.ehl_tab_select {
  z-index: 1;
  margin: -3px;
  color: @ehl_white;
  background-color: @ehl_blue;
  border-color: @ehl_blue;
  border-radius: 3px;
}

.ehl_dialog {
  display: flex;
  flex-direction: column;
  min-width: 30%;
  // max-height: 70%;
  // background: @ehl_table_back;
  box-shadow: 0 2px 4px 0 @ehl_table_shadow;

  /deep/ .el-dialog {
    border-radius: 6px;

    .el-dialog__header {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      width: 100%;
      border-bottom: 1px solid @ehl_devide_grey;

      .el-dialog__title {
        font-size: @ehl_font_size_title;
      }
    }

    .el-dialog__body {
      flex-grow: 1;
      width: 100%;
      min-height: 200px;
      padding: 5px 20px;
      margin: 5px 0;
      overflow: auto;
    }

    .ehl_btn_box {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 10px;
    }

    ._ehl_dialog_content {
      flex-grow: 1;
      width: 100%;
      padding: 5px 20px;
      overflow: auto;
    }

    ._ehl_dialog_button {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }
}

.ehl_form {
  width: 100%;

  .el-form-item__label {
    flex-shrink: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .el-form-item__content {
    display: flex;
    align-items: center;
  }
}

.ehl_table {
  .el-table__header {
    th {
      height: 42px;
      padding: 0 4px;
      font-size: 16px;
      font-weight: bold;
      line-height: 42px;
      color: @ehl_black;
      background: @ehl_table_grey;
    }
  }

  .el-table__body {
    .cell {
      display: flex;
      align-items: center;
      height: 100%;
    }

    td {
      height: 50px;
      padding: 0;
      font-size: 14px;
      color: @ehl_black;
      background-color: @ehl_white !important;

      &:hover {
        background-color: @ehl_white !important;
      }
    }
  }
}

.ehl_slider_size {
  width: 100%;
}

.ehl_slider {
  display: flex;
  align-items: center;

  .el-slider__runway {
    margin: 0;
  }

  .el-slider__button-wrapper {
    top: -4px;
    display: flex;
    align-items: center;
    width: 15px;
    height: 15px;
  }

  .el-slider__button {
    width: 100%;
    height: 100%;
  }
}

.ehl_popover_pop {
  width: auto !important;
  min-width: 50px;
  padding: 5 10px;
  cursor: pointer;
}

.ehl_menu_size {
  flex-shrink: 0;
  height: 100%;
}

.ehl_menu {
  width: auto;
  border: none;

  .el-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    font-size: @ehl_font_size_default;
    line-height: 100%;
  }

  .el-submenu {
    height: 100%;

    .el-submenu__title {
      .el-menu-item();
    }
  }
}

.ehl_menu_pop {
  width: 140px;

  .el-menu--popup {
    width: 100%;
    min-width: 100%;

    .el-menu-item {
      width: 100%;
      font-size: @ehl_font_size_default;

      &:hover {
        background-color: @ehl_back_grey;
      }

      .is-active {
        background-color: @ehl_back_grey;
      }
    }
  }
}

.ehl_quadrangle {
  background:
    linear-gradient(to right, @ehl_quadrangle, @ehl_quadrangle) left top
    no-repeat,
    linear-gradient(to bottom, @ehl_quadrangle, @ehl_quadrangle) left top no-repeat,
    linear-gradient(to left, @ehl_quadrangle, @ehl_quadrangle) right top no-repeat,
    linear-gradient(to bottom, @ehl_quadrangle, @ehl_quadrangle) right top no-repeat,
    linear-gradient(to right, @ehl_quadrangle, @ehl_quadrangle) left bottom no-repeat,
    linear-gradient(to bottom, @ehl_quadrangle, @ehl_quadrangle) left bottom no-repeat,
    linear-gradient(to left, @ehl_quadrangle, @ehl_quadrangle) right bottom no-repeat,
    linear-gradient(to left, @ehl_quadrangle, @ehl_quadrangle) right bottom no-repeat !important;

  /* 设置大小 */
  background-color: @ehl_quadrangle_back !important;
  background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px !important;
}

.ehl_digi {
  font-family: 'lcd' !important; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
}

body {
  .CodeMirror-hints {
    z-index: 9999;
  }

  .el-loading-mask {
    background: rgba(0, 0, 0, 0.4);

    .el-loading-spinner {
      .el-icon-loading {
        font-size: 70px;
        color: white;
      }

      .el-loading-text {
        color: white;
      }
    }
  }

  .el-message-box {
    display: flex;
    flex-direction: column;
    min-width: 20%;
    max-width: 70%;
    min-height: 20%;
    max-height: 70%;
    padding: 0;
    margin: 0 auto;
    margin-top: 15vh;
    border-radius: 6px;
    box-shadow: 0 2px 4px 0 rgba(218, 218, 218, 0.5);

    .el-message-box__header {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 20px 20px 10px;
      border-bottom: 1px solid #dfe6ed;

      .el-message-box__title {
        font-size: 18px;
      }
    }

    .el-message-box__content {
      flex-grow: 1;
      width: 100%;
      padding: 0;
      overflow: auto;
      font-size: 16px;
      text-align: center;

      .el-message-box__message {
        padding: 25px 15px;
        font-size: 16px;
        text-align: center;
        white-space: nowrap;
      }

      .el-message-box__input {
        padding: 10px 10px 0 10px;
        font-size: 16px;

        .el-input__inner {
          height: 34px;
        }
      }
    }

    .el-message-box__btns {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12px;

      button:first-child {
        .ehl_btn_white();
        .ehl_btn_size_small();
      }

      button:last-child {
        .ehl_btn_blue();
        .ehl_btn_size_small();
      }
    }
  }

  // .el-table-filter {
  //   cursor: pointer;

  //   .el-checkbox-group {
  //     text-align: left;
  //   }
  // }
}

//------------

// .ehl_date {
//   padding: 0 15px !important;

//   .el-range-separator {
//     width: auto;
//     margin: 0 5px !important;
//   }
// }

// .ehl_hint_dialog {
//   display: flex;
//   align-items: center;
//   justify-content: center;

//   .el-dialog {
//     width: 20%;
//     margin: 0 !important;
//     background: @ehl_table_back;
//     border-radius: 6px;
//     box-shadow: 0 2px 4px 0 @ehl_table_shadow;
//   }

//   .el-dialog__body {
//     padding: 10px 20px;
//   }
// }
